html,
body {
    background: $gray-lte;
    height: 100% !important;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
    outline:unset;
}
@each $i in $themes {
    $item:map-get($btns, $i);
    .#{$i} {
        .el-cascader .el-input .el-input__inner:focus,
        .el-cascader .el-input .el-input__inner:hover,
        .form-control:focus,
        .form-control:hover,
        .el-input__inner:focus,
        .el-input__inner:hover,
        .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
        .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
        .avatar-uploader .el-upload:hover,
        .el-switch.is-checked .el-switch__core,
        .el-select .el-input.is-focus .el-input__inner{
            border-color:map-get($item,'border');
        }
        .el-cascader-node.in-active-path,
        .el-cascader-node.is-selectable.in-checked-path,
        .el-cascader-node.is-active,
        .el-switch__label.is-active,
        .el-input-number__increase:hover,
        .el-input-number__decrease:hover,
        .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
        .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
        .el-select-dropdown__item.selected,
        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover,
        .input-group-addon a,
        .theme-a,
        .el-picker-panel__icon-btn,
        .el-date-table td.today span
        {
            color: map-get($item,'bg');
        }
        .input-group-addon a,
        .theme-a{
            &:hover,&:active,&:focus{
                color: lighten(map-get($item,'bg'),12%);
            }
        }
        .el-switch.is-checked .el-switch__core,
        .el-date-table td.current:not(.disabled) span{
            background-color: map-get($item,'bg');
        }
        .el-date-table td.current:not(.disabled) span{
            color: $white;
        }
    }
    .btn-#{$i} {
        &:focus {
            background-color: darken(map-get($item,'bg'), 5%);
        }
    }
}
.btn:not(.btn-xs):not(.btn-lg):not(.btn-sm):not(.btn-xs){
    padding-top: 7px;
    padding-bottom: 7px;
}

body {
    .el-input-number__increase.is-disabled, .el-input-number__decrease.is-disabled{
        color: $gray-lte !important;
    }
    .form-control:disabled,
    .disabled .avatar-uploader .el-upload,
    .el-input-number.is-disabled .el-input-number__increase,
    .el-input-number.is-disabled .el-input-number__decrease,
    .el-input.is-disabled .el-input__inner{
        border-color: $gray-lte !important;
        background-color: $disabled-bg;
        cursor: not-allowed;
    }
    .form-control{
        height: $input-height-base;
    }
    textarea.form-control{
        height:auto;
    }
    .el-input-number__decrease{
        border-radius:$--input-border-radius 0px 0px $--input-border-radius;
    }
    .el-input-number__increase{
        border-radius: 0px $--input-border-radius $--input-border-radius 0px;
    }

    .btn-default,
    .btn-primary,
    .btn-success,
    .btn-info,
    .btn-warning,
    .btn-danger,
    .alert-default,
    .alert-primary,
    .alert-success,
    .alert-info,
    .alert-warning,
    .alert-danger{
        background-image: none;
        text-shadow: unset;
    }
    .app {
        height: 100%;
    }

    .h100 {
        height: 100%;
    }

    [v-cloak] {
        display: none;
    }

    .w-100 {
        width: 100% !important;
    }

    #remktfrm {
        display: none;
    }

    .hide {
        display: none;
    }

    .move-items {
        min-height: 59px;
    }

    .snippet {
        position: relative;
        overflow: visible
    }

    .snippet code {
        font-size: 14px;
        line-height: 20px
    }

    .snippet .btn {
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        opacity: 0;
        padding: 2px 6px;
        position: absolute;
        right: 4px;
        top: 4px
    }

    .snippet:hover .btn, .snippet .btn:focus {
        opacity: 1
    }

    @media screen and (max-width: 768px) {
        .snippet .btn {
            opacity: 1
        }
    }

    .active-move .move-item {
        cursor: move;
    }

    .slider-box {
        padding: 0px 10px;
    }

    .pager-input .el-input-number.is-controls-right .el-input__inner {
        padding-left: 5px;
        padding-right: 35px;
    }

    div table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
        top: calc(50% - 10px);
    }

    .per_page .el-input--suffix {
        right: 0px;
    }

    .per_page .el-input--suffix .el-input__inner {
        padding-left: 5px;
        padding-right: 20px;
        text-align: center;
    }

    .small-box, .card {
        border-radius: .25rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .el-input__inner {
        height: $input-height-base;
        line-height: $input-height-base;
    }

    .el-switch__label {
        color: $secondary;
    }

    .el-cascader {
        line-height: $input-height-base;
    }

    .skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a, .skin-black-light .main-header .navbar .navbar-right > li > a,
    .skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a, .skin-black .main-header .navbar .navbar-right > li > a {
        border-left: none;
    }

    .skin-black-light .main-header .navbar > .sidebar-toggle, .skin-black .main-header .navbar > .sidebar-toggle {
        border-right: none;
    }

    @media (max-width: 767px) {
        .skin-black-light .main-header .logo {
            background-color: #fff;
            color: black;
        }
        .skin-black-light .main-header .logo:hover {
            background-color: #fcfcfc;
            color: black;
        }
    }

    .el-input.is-disabled .el-input__inner{
        color: #555;
    }
    .json-view-container .json-view .angle{
        left: 0px !important;
    }
    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border-bottom-width: 1px;
    }

}





